<template >
    <div class="box">
        <div class="null-page" v-show="yes"></div>

        <el-card class="box-card member-coupon">
            <div slot="header" class="clearfix">批发竞价</div>
            <div class="my-account">
                <div class="detail" v-if="orderList.length > 0">
                    <ul v-for="(item, index) in orderList" :key="index">
                        <li class="detail_list">
                            <img :src="$img(item.sku_image.split(',')[0])" alt="" />
                            <div class="timeShow">距结束{{ item.timeShow }}</div>
                            <span>{{ item.pintuan_name }}</span>
                              <div style="display:none;">   {{num}}</div> 
                            <p v-if="!item.timeShow">¥ {{ item.price }}<el-button  @click="button(item.bidding_id)">已结束</el-button></p>
                            <p v-else-if="item.enter_id != 0">¥ {{ item.price }}<el-button  @click="enterDetail(item.bidding_id)">已竞标</el-button></p>
                            <p v-else>¥ {{ item.price }}<el-button  @click="button(item.bidding_id)">去竞标</el-button></p>
                        </li>
                     
                    </ul>
                </div>

                <div v-if="orderList.length == 0" class="empty-wrap">暂无相关竞标商品</div>

                
            </div>
              
        </el-card>
              <div class="pager">
                 	<el-pagination 
								@size-change="handlePageSizeChange" 
								@current-change="handleCurrentPageChange" 
								:current-page="currentPage" 
								:page-size="pageSize" 
								background 
								:pager-count="5" 
								prev-text="上一页" 
								next-text="下一页" 
							
							
							></el-pagination>
                </div>
    </div>
</template>
<script>
import { biddingpage } from "@/api/member/competitive";
import { memberDetail } from "@/api/pintuan/pintuan";

export default {
    name: "competitive",
    data() {
        return {
            orderList: [],
            total: 0,
            currentPage: 1,
            pageSize: 6,
            loading: true,
            yes: true,
            timeOutObj: null,
            num: 0,
            Math: "",
            pintuanTraderDetail: '',
        }
    },
    mounted() {
        let self = this
        setTimeout(function () {
            self.yes = false
        }, 300)
    },
    created() {
        this.getcompetitive();
        this.getTime();
        this.getMemberinfo();
    },

    methods: {
        getMemberinfo() {
            memberDetail({})
                .then(res=>{
                    this.pintuanTraderDetail = res.data;
                })
                .catch(err=>{
                    console.log(err,'err')
                })
        },
        enterDetail(id) {
            this.$router.push('/member/bidding_tow?enter_id=' + id)
        },
        handlePageSizeChange(size) {
            this.pageSize = size
            this.refresh()
        },
        handleCurrentPageChange(page) {
            this.currentPage = page
            this.refresh()
        },
        refresh() {
            this.loading = true
            this.getcompetitive()
        },
        getcompetitive() {
            biddingpage({
                page_size: this.pageSize,
                page: this.currentPage
            }).then((res) => {
                this.orderList = res.data.list
                this.getTime()
                clearTimeout(this.timeOutObj)
            })
        },
        getTime() {
            let that = this
            let orderList = this.orderList
            for (let i in orderList) {
                let item = orderList[i]
                let curr_time = Math.floor(new Date().getTime() / 1000)
                let end_time = item.bidding_end_time
                if (curr_time < end_time) {
                    let time = end_time - curr_time
                    let day = parseInt(time / (60 * 60 * 24))
                    let hou = parseInt((time % (60 * 60 * 24)) / 3600)
                    let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60)
                    let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60)
                    let obj = {
                        day: day < 10 ? "0" + day : day,
                        hou: hou < 10 ? "0" + hou : hou,
                        min: min < 10 ? "0" + min : min,
                        sec: sec < 10 ? "0" + sec : sec
                    }
                    let timeShow = ""

                    timeShow += obj.day + "天"

                    timeShow += obj.hou + ":" + obj.min + ":" + obj.sec
                    item.timeShow = timeShow
                }
            }
            this.orderList = orderList
            this.num++
            that.timeOutObj = setTimeout(function () {
                that.getTime()
            }, 1000)
        },
        button(bidding_id){
             if(this.pintuanTraderDetail == null) {
                this.$message({
                    type: 'warning',
                    message: '去申请成为团长',
                })
                this.$router.push('/member/index');
                return;
            }
            this.$router.push({ path: "/member/bidding?bidding_id=" + bidding_id })
        }
    }
}
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    position: relative;
}
.null-page {
    width: 100%;
    height: 730px;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}
.detail_list {
    float: left;
    width: 284px;
    height: 385px;
    border: 1px solid #eeeeee;
    margin: 15px;
    display: inline-block;
    justify-content: center;
    position: relative;
    img {
        width: 257px;
        height: 241px;
        margin: 16px 0 0 15px;
    }
    .timeShow {
        padding: 10px;
        background: #ffe5e5;
        border: 0px solid #2b2f30;
        position: absolute;
        top:210px;
        right: 12px;
        text-align: center;
        color: red;
        font-size: 16px;
    }
    span {
        display: inline-block;
        width: 253px;
        height: 35px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 21px;
        margin: 18px 0 0 15px;
    }
    p {
        font-size: 20px;
        font-family: Roboto;
        font-weight: 500;
        color: #ff5f8a;
        display: inline-block;

        margin: 20px 0 0 14px;
    }
    button {
        width: 90px;
        line-height: 0px;
        color: #ffffff;
        height: 28px;
        background: #ff5f8a;
        border: 0px solid #2b2f30;
        border-radius:20px;
        position: absolute;
        right: 14px;
        margin-top: 6px;
    }
}
.pager{
    margin-top: 20px;
}
</style>